import classNames from 'classnames'
import styles from './ArticleItem.module.scss'
import dayjs from 'dayjs'
// 相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime'
// 国际化 - 中文
import 'dayjs/locale/zh-cn'
// 启用相对时间
dayjs.extend(relativeTime)
// 启用中文
dayjs.locale('zh-cn')
type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  // type: 0 | 1 | 3
  type: number
  title: string
  aut_name: string
  comm_count: number
  pubdate: string
  images: string[]
}

export const ArticleItem = (props: Props) => {
  return (
    <div className={styles.root}>
      <div className={classNames('article-content', props.type === 3 && 't3', props.type === 0 && 'none-mt')}>
        <h3>{props.title}</h3>
        {props.type !== 0 && (
          <div className="article-imgs">
            {/* <div className="article-img-wrapper">
              <img src="http://geek.itheima.net/resources/images/63.jpg" alt="" />
            </div> */}
            {props.images.map((item, index) => (
              <div key={index} className="article-img-wrapper">
                <img src={item} />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classNames('article-info', props.type === 0 && 'none-mt')}>
        <span>{props.aut_name}</span>
        <span>{props.comm_count}评论</span>
        <span>{dayjs().from(dayjs(props.pubdate))}</span>
        <span className="close">
          <svg className="icon">
            <use xlinkHref={'#iconbtn_essay_close'}></use>
          </svg>
        </span>
      </div>
    </div>
  )
}
